<template>
    <div>
        <el-dialog title="题目预览" :visible="showDialog" @close="btnCancel">
            <div>
                <el-row type="flex" class="row-bg" justify="space-around">
                    <el-col :span="6"><div class="grid-content bg-purple"></div>【题型】：{{previewList.questionType | filtration}}题</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">【编号】：{{previewList.id}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>【难度】：{{previewList.difficulty | difficulty}}</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>【标签】：{{previewList.tags}}</el-col>
                </el-row>
                <el-row type="flex" class="row-bg" justify="space-around">
                    <el-col :span="6"><div class="grid-content bg-purple"></div>【学科】：{{previewList.subjectName}}</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple-light">【目录】：{{previewList.directoryName}}</div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div>【方向】：{{previewList.direction}}</el-col>
                    <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row type="flex" class="row-bg" justify="start">【题干】：</el-row>
                <el-row type="flex" class="row-bg" justify="start"><div v-html="previewList.question" style="font-size: 12px; color:blue;">
                </div></el-row>
                <el-row type="flex" class="row-bg" justify="start">{{previewList.questionType | filtration}}题 选项：（以下选中的选项为正确答案）</el-row>
                <div v-if="+previewList.questionType === 2">
                    <el-row type="flex" class="row-bg" justify="start" style="margin-top: 15px;" v-for="(item,index) in previewList.options"><el-checkbox v-model="item.isRight === 0"  :label="item.title"></el-checkbox></el-row>
                </div>
                <div v-else-if="+previewList.questionType === 1"><el-row type="flex" class="row-bg" justify="start" style="margin-top: 15px;" v-for="(item,index) in previewList.options"><el-radio v-model="radio" :label="item.isRight" >{{item.title}}</el-radio></el-row></div>
                <!-- <el-row type="flex" class="row-bg" justify="start" style="margin-top: 15px;"><el-radio v-model="radio" label="2">2</el-radio></el-row>
                <el-row type="flex" class="row-bg" justify="start" style="margin-top: 15px;"><el-radio v-model="radio" label="3">3</el-radio></el-row>
                <el-row type="flex" class="row-bg" justify="start" style="margin-top: 15px;"><el-radio v-model="radio" label="4">4</el-radio></el-row> -->
                <div v-else></div>
                <el-divider></el-divider>
                <el-row >
                【参考答案】：
                <el-button type="danger" size="small" @click="btnAnswer"
                    >视频答案预览</el-button
                >
                </el-row>
                <!-- 视频播放 -->
                <el-row >
                  <video
                    v-show="showVideo"
                    src="https://v-cdn.zjol.com.cn/277004.mp4"
                    width="400px"
                    height="200px"
                    controls
                  ></video>
                </el-row>
                <el-divider></el-divider>
                <el-row >【答案解析】：<span v-html="previewList.answer? previewList.answer : '无'"></span></el-row>
                <el-divider></el-divider>
                <el-row >【题目备注】：<span v-html="previewList.tags? previewList.tags : '无'"></span></el-row>

            </div>
            <el-row  type="flex" justify="center">
                <el-col :span="6">
                    <el-button size="small" @click="btnCancel" type="primary">关闭</el-button>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import {difficulty,questionType,direction} from '../../../api/hmmm/constants'
export default {
    name: 'HmmmFrontendDevIndex',
    props: {
        showDialog: {
           type :Boolean,
           required: true
        }, 
        previewList: {
           type :Object/Array/String,
           required: true
        },
        
    },
    filters: {
    filtration(value){
        
      return  questionType.find(item => {
        
          return item.value === (+value)
        
        
      } )['label']
    },
    difficulty(value){
      return difficulty.find(item => {
        
          return item.value === +value
        
        
      } ).label
    }
  },
    data() {
        return {
            radio: 1,
            showVideo: false,
        };
    },
    
    mounted() {
        
    },

    methods: {
        btnCancel(){
            this.$emit('update:showDialog',false)
        },
        btnAnswer() {
      this.showVideo = true;
    },
    },
};
</script>

<style lang="scss" scoped>

</style>